<template>
    <div class="login">
        <div class="login-box" >

            <el-form label-width="100px" ref="loginForm" :model="loginParams" :rules="rules" :status-icon="true">
                <el-form-item label="用户名"  prop="user">
                    <el-input v-model="loginParams.user" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pwd">
                    <el-input type="password" v-model="loginParams.pwd"  placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item> 
                    <el-button type="primary" @click="submitForm">登录</el-button>
                    <el-button type="primary" @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    // import { adminLoginAPI } from '@/api/admin';
    import { mapActions } from 'vuex';

    export default {
        name:"LoginView",
        data(){

            let validatePass = (rule, value, callback) =>{ // 失焦时触发
                console.log(this); // 当前组件实例 
                console.log("rule",rule);
                console.log("value",value);
                console.log("callback",callback);

                var reg = /^\w{5,12}$/;
               
                if(!value){ // 如果是 ""
                    callback("请输入密码!")
                }else if(value.length<5 || value.length>12){ //  // len: 5 - 12
                    callback("密码需要在5-12之间!")
                }else if(!reg.test(value)){
                    callback("密码有数字 字母 下划线组成!")
                }else{
                    callback();
                }

            }


            return {
                loginParams:{
                    user:"admin",
                    pwd:"123456",
                },
                rules:{
                    // 对应el-form-item中prop属性验证表单
                    // 表单规则
                    user:[
                        { required: true, message: '请输入用户名!', trigger: 'blur' },
                        { min:5,max:12, message: '用户名需要在3-12之间', trigger: 'blur' },
                        { pattern:/^[a-zA-Z]\w{4,11}$/, message: '用户由数字,字母,下划线组成,且不能以数字开头', trigger: 'blur' },
                    ],
                    // 自定义校验规则 => 配置校验函数
                    // 校验函数中有三个参数  => rule, value, callback
                    // rule => 当前校验规则(对象)
                    // value => 校验的值
                    // callback  => 指定校验结果的回调函数 => 如果没有参数就表示校验成功,有值=> 错误提示

                    pwd:[ { validator: validatePass, trigger: 'blur' }],
                }

            }
        },
        methods:{
            ...mapActions(["loginAndUpdateAuthorityInfo"]),
            submitForm(){
                // 先校验一次 => 全都校验成功之后在提交
                // 如何校验?
                // 通过表单组件的方法
                this.$refs.loginForm.validate((bool,failField)=>{
                    console.log("bool",bool);
                    console.log("failField",failField);

                    if(bool){
                        console.log("调用登录接口");

                        // 先引入 api 在引入mutations中方法
                        // adminLoginAPI({
                        //     adminname:this.loginParams.user,
                        //     password:this.loginParams.pwd,
                        // }).then(res=>{
                        //     console.log("登陆成功",res);
                        //     var {code,message,data} = res;
                        //     if(code == "200"){
                        //         this.updateAuthorityInfo(data);
                        //     }else if( code == '10003'){
                        //         alert(message);
                        //     }
                        // }).catch(err=>{
                        //     console.log(err);
                        // })

                        
                        // 调用action中封装的公共方法_异步  => 返回Promise实例
                        this.loginAndUpdateAuthorityInfo({
                            adminname:this.loginParams.user,
                            password:this.loginParams.pwd,
                        }).then(()=>{
                            // 登录成功
                            var {ReturnUrl} = this.$route.query;
                            if(ReturnUrl){
                                this.$router.replace(ReturnUrl);
                            }else{
                                this.$router.push("/");
                            }
                            this.$message({
                                message:"登录成功!",
                                type:"success",
                                duration:2000,
                                // duration:0,
                                // showClose:true,
                            })

                        }).catch(err=>{
                            
                            this.$message({
                                type:"error",
                                message:err.message,
                                duration:2000,
                            })
                            
                            // alert(err.message);
                            // this.$msgbox({
                            //     title:"错误",
                            //     type:"error",
                            //     message:err.message,
                            // })
                            // this.$alert(err.message,"错误",{
                            //     type:"error",
                            // })

                            // this.$confirm("购买成功,是否进入购物车","确认").then().catch()
                            // this.$prompt("请输入...","确认").then().catch()


                        })
                    }
                })

            },
            resetForm(){
                this.$refs.loginForm.resetFields();
            }
        }
    }
</script>

<style  scoped>
    .login{
        width: 100%;
        height: 100%;
        background: url(@/assets/bg.png) no-repeat left top / cover;
    }
    .login-box{
        width: 400px;
        padding: 40px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        background-color: #fff;
        border-radius: 10px;
    }

</style>